<template>
  <div>
    <header class="header">
      <div class="title">
        <img src="../../assets/images/01_11.png" alt class="img_zuo" @click="back" />
        <div>三年行动</div>
        <div class="btn-change" @click="jumpDepartment" v-show="qx!='街道'">
          <img src="@/assets/images/img-switch.png" class="img"/>
          <span style="margin-left: 5px">{{ chooseId === 0 ? '部门' : '街道' }}</span>
        </div>
        <!-- <img
          src="../../assets/images/big.png"
          alt
          class="img_you"
          @click="search"
        /> -->
        <!-- <div class="btn-add">
          <div class="datatime">
            <img src="../../assets/images/99.png" class="lefts" @click="less" alt />
            <span class="datatime-intro">{{year}}</span>
            <img src="../../assets/images/99.png" class="rights" @click="add" alt />
          </div>
        </div> -->
      </div>
    </header>
    <div class="up"></div>
    <div class="contents">
      <div class="main_top">
        <table>
          <tr>
            <td><div class="tit_width">单位</div></td>
            <td><div class="tit_width">已落实</div></td>
            <td><div class="tit_width">未落实</div></td>
            <td><div class="tit_width">其中已超期</div></td>
            <td><div class="tit_width">小计</div></td>
            <td><div class="tit_width">完成率</div></td>
          </tr>
          <tr>
            <td width="85"><div class="tit_width td-left">合计</div></td>
            <td width="50"><div class="tit_width">{{ hjObj.already?hjObj.already:0 }}</div></td>
            <td width="50"><div class="tit_width">{{ hjObj.Noimplementation?hjObj.Noimplementation:0 }}</div></td>
            <td width="80"><div class="tit_width">{{ hjObj.Overdue?hjObj.Overdue:0 }}</div></td>
            <td width="50"><div class="tit_width">{{ hjObj.counts?hjObj.counts:0 }}</div></td>
            <td width="50"><div class="tit_width">{{ hjObj.percentage?hjObj.percentage:0 }}%</div></td>
          </tr>
        </table>
        <div class="main-cont">
          <table>
            <tr v-for="(item, index) in dataList" :key="index" @click="toShow(item)">
              <td width="85">
                <div class="tit_width td-left">{{ item.jc }}</div>
              </td>
              <td width="50">
                <div class="tit_width">{{ item.already?item.already:0 }}</div>
              </td>
              <td width="50">
                <div class="tit_width">{{ item.Noimplementation?item.Noimplementation:0 }}</div>
              </td>
              <td width="80">
                <div class="tit_width">{{ item.Overdue?item.Overdue:0 }}</div>
              </td>
              <td width="50">
                <div class="tit_width">{{ item.counts?item.counts:0 }}</div>
              </td>
              <td width="50">
                <div class="tit_width">{{ item.percentage?item.percentage:0 }}</div>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <Tabbar></Tabbar>
  </div>
  
</template>
<script>
import Tabbar from "../tabbar.vue";

  export default {
      components: {
    Tabbar
  },
    data() {
      return {
        hjObj:{},
        dataList: [],
        userId: '',
        chooseId: 0,
        year: 0,
        qx:'',
        types:0,//0街道 1 部门
      };
    },
      beforeRouteEnter(to, from, next) {
    next((vm) => {
      console.log("哈哈哈哈哈")
     vm.userId = localStorage.getItem('userId');
      vm.qx = localStorage.getItem("snxd_qx");
      vm.$forceUpdate();
      vm.query();
    })
      },
    mounted () {
     
      
       localStorage.removeItem("list_scrollTop");
        localStorage.removeItem("list_scrollTops");
      var _this = this;
      // _this.userId = localStorage.getItem('userId');
       _this.qx = localStorage.getItem("snxd_qx");
     
     
      if(_this.qx=='区级'){
        _this.chooseId = 0;
      }else if(_this.qx=='街道'){
        _this.chooseId = 1;
      }else if(_this.qx=='科室'){

 $(".btn-change").hide()
      }
      var now = new Date();
      _this.year = now.getFullYear();
      // localStorage.setItem("years", _this.year)
      // _this.$forceUpdate();
      //  _this.query();

      //物理返回
      // window.addEventListener("popstate", function(){
      //   _this.back();
      // }, false);
    },
   
    methods: {
      back(){//返回
        // this.$router.push("/index");
          this.$router.back();
      },
    //   search() {
    //   this.$router.push("snxd_search");
    // },
      //缓存
      
      query () {
        let that = this;
        try{
            plus.nativeUI.showWaiting("正在加载...");
          }catch(e){
            console.log(e.message);
          }
        that.dataList = [];
        that.hjObj = {};
        let params = {
          userId: that.userId,
          // years: that.year,
          types:that.types,
          
        };
        that.axios.get(`${that.$global_msg.Url.host}/ThreeYearsController/selectUnitsByUserId`,
          { params }).then(res => {
            try{
              plus.nativeUI.closeWaiting();
            }catch(e){
              console.log(e.message);
            }
          console.log(res)
          if(res&&res.data&&res.data.rows&&res.data.rows.mapList&&res.data.rows.mapList.length>0){
            that.dataList = res.data.rows.mapList;
            
          }else{
            that.dataList = [];
          }
          if(res&&res.data&&res.data.rows&&res.data.rows.mapOne){
            that.hjObj = res.data.rows.mapOne;
          }else{
            that.hjObj = {};
          }
          that.$forceUpdate();
          that.$nextTick(function(){
            var h_gao = window.screen.height;
            var up_h = $('.up').outerHeight(true);
            var table_h = $('table').outerHeight(true);
            var height = h_gao-up_h-table_h-20;
            $('.main-cont').css('max-height',height+'px');
          });
        })
      },
      // less() {
      //   this.year--;
      //    this.years=this.year
      //      localStorage.setItem("years", this.year)
      //   this.query();
      // },
      // add() {
      //   this.year++;
      //   this.years=this.year
      //     localStorage.setItem("years", this.year)
      //   this.query();
      // },
      
      //  切换部门
      jumpDepartment () {
        this.chooseId = this.chooseId === 0 ? 1 : 0;
        this.types=this.types === 0 ? 1 : 0;
        this.query();
      },
      toShow(item){
        console.log(item.dwId)
        console.log(item)
        localStorage.setItem('diqu',item.jc)
        localStorage.setItem('snxd_dwid',item.dwId)
    
        this.$router.push("/snxd_list");
        
      },
    },
    created(){
      
     
    }
  }
</script>
<style  scoped>
  * {
    color: #ffffff;
  }
  .main-cont {
    max-height: 11.5rem;
    overflow: hidden;
    overflow-y: auto;
  }
  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    top: 0;
    z-index:100000;
    font-size: 0.388888rem;
  }
.img_you {
  width: 0.529629rem;
  height: 0.529629rem;
}
  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
    position: relative;
  }

  .title > div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }

  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }
  .btn-change {
    position: absolute;
    left: 1.537037rem;
    font-size: 0.388888rem !important;
    bottom: 0;
    width: auto !important;
    height: 100%;
    display: flex;
    align-items: center;
  }
  .btn-change img {
      width: 0.529629rem;
      height: 0.529629rem;
  }
  .btn-add {
    position: absolute;
    right: 0.24rem;
    width: auto !important;
    height: 80%;
    bottom: 0;
    display: flex;
    align-items: center;
    font-size: 0.388888rem !important;
  }
  .datatime {
    width: 2rem;
    display: flex;
    padding: 0 0.24rem;
  }
  .datatime-intro {
    padding: 0 0.213333rem;
    font-size: 0.32rem;
  }
  .datatime .lefts{
      width: 0.26rem;
      height: 0.4rem;
  }
  .datatime .rights{
      width: 0.26rem;
      height: 0.4rem;
      -webkit-transform: rotate(-180deg);
      transform: rotate(-180deg);
  }

  .up {
    padding-top: 2.037037rem;
  }
  table {
    width: 100%;
    /* border: 1px solid #ffffff; */
    margin: 0 auto;
    color: #ffffff;
    border-collapse: collapse;
    text-align: center;
    margin: 0;
    font-size: 0.333333rem;
  }
  th {
    height: 0.925926rem;
    margin-top: 1.111111rem;
    border: 1px solid #ffffff;
  }
  td {
    height: 1.25926rem;
    border: 1px solid #ffffff;
    border-right: none;
    /* border-bottom: none; */
  }
  .main_top {
    background: #7ac0fe;
    border-radius: 0.1852rem;
    padding-bottom: 1.7rem;
  }
  .contents {
    width: 100%;
    margin: 0 auto;
    /* border-radius: 0.185185rem; */
    border-radius: 0.37037rem;
    overflow: hidden;
    padding: 0 0.37037rem;
    box-sizing: border-box;
  }
  .tit_width {
    display: flex;
    justify-content: center;
  }
  .td-left{
    justify-content: flex-start;
    margin-left: 0.185185rem;
    margin-right: 0.185185rem;
  }
</style>
